<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="发布职位" :isAppBtn="false"></HeadCustom>
		<view class="card-box">
			<view class="card-hd fboxRow Ycenter" v-if="tabsState">
				<TabsCustom :list="navList" inactiveSize="30rpx" :active.sync="navIndex" :lineWidth="20" keyName="label" @change="tabsClick"></TabsCustom>
			</view>
			<view class="card-bd fboxCol Ycenter Xcenter">
				<view v-if="listConfig.loading == 'list-not'">
					<NotEmpty text="暂无相关信息" :height="scrollHeight" />
				</view>
				<view class="card-scroll" v-if="listData.length || listConfig.loading =='loading'">
					<view class="position-item" v-for="(item, index) in listData" :key="index" @click="goPage(item)">
						<view class="hd fboxRow Ycenter">
							<view class="flex1 font30 lh44">{{item.jobName}}</view>
							<view class="font26 lh38">
								<text :class="[item.jobStatus == 2 ? 'color-6B707C' : 'color-E8CDA7']"
									v-if="item.jobStatus != 1">{{gainData(item.jobStatus, 'jobStatus').label}}</text>
							</view>
						</view>
						<view class="bd lh38 mt8 color-6B707C">
							<text>{{item.workArea}}</text>
							<text class="ml24">{{gainData(item.minEducation, 'educationList').label}}</text>
							<text class="ml24">{{gainData(item.workExperience, 'workExperience').label}}</text>
							<text class="ml24">
								<text v-if="item.salaryMin == 0 || !item.salaryMin">面议</text>
								<text v-else>{{unitNum(item.salaryMin)}}-{{unitNum(item.salaryMax)}}</text>
							</text>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
				</view>
			</view>
		</view>
		<BottomFixed>
			<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 bg-linear" @click="goPublish">发布新职位</view>
			</view>
		</BottomFixed>
	</view>
</template>

<script>
	import {
		jobList
	} from '@/api/recruit.js';
	import RecruitmentItem from '@/components/card/recruitment-item.vue';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	import TabsCustom from '@/components/head-custom/tabs-custom.vue';
	import {
		gainData
	} from '../common/config.js';
	import {
		unitNum
	} from '@/static/js/common.js';
	import {
		listMixins
	} from '../common/list.mixins.js';
	export default {
		mixins: [listMixins],
		components: {
			RecruitmentItem,
			BottomFixed,
			TabsCustom
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				unitNum,
				scrollTop: 0,
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: [],
				navIndex: 0,
				navList: [{
						value: '',
						label: '全部'
					},
					{
						value: '1',
						label: '开放中'
					},
					{
						value: '0',
						label: '待审核'
					},
					{
						value: '3',
						label: '审核失败'
					},
					{
						value: '2',
						label: '已关闭'
					}
				],
				gainData: gainData,
				companyId: getApp().globalData.companyId,
				jobStatus: '',
				tabsState: false,
				scrollHeight: 0
			}
		},
		onShow() {
			this.getInit()
			this.tabsState = false
			this.$nextTick(() => {
				this.tabsState = true
			})
			uni.getSystemInfo({success:(sys)=>{
				this.scrollHeight = sys.screenHeight - getApp().globalData.statusBarHeight - 200
				console.log(this.scrollHeight)
			}})
		},
		methods: {
			tabsClick(e) {
				if (this.navIndex != e.index) {
					this.navIndex = e.index
					this.jobStatus = e.value
					this.getInit()
					this.tabsState = false
					this.$nextTick(() => {
						this.tabsState = true
					})
				}
			},
			getInit() {
				this.listConfig = {
					current: 1,
					size: 10,
					count: 0,
					loading: 'loading'
				}
				this.listData = []
				this.getList()
			},
			getList() {
				const {
					current,
					size,
					loading
				} = this.listConfig
				jobList({
					current,
					size,
					companyId: this.companyId,
					jobStatus: this.jobStatus
				}).then(res => {
					if (this.listData.length) {
						this.listData = this.listData.concat(res.data.list)
					} else {
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			goPage(e) {
				this.$pageTo('/recruit/enterprise/detail?id=' + e.id)
			},
			goPublish() {
				if (getApp().globalData.companyInfo.authStatus == 1) {
					getApp().globalData.recruitmentTemp = {}
					this.$pageTo('/recruit/enterprise/publishRecruitment')
				} else {
					uni.showToast({
						icon: 'none',
						title: '你的企业还未认证，请先认证后再发布招聘信息！'
					})
				}
			},
			onReachBottom() {
				this.listMore()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}

	.position-item {
		padding: 32rpx 40rpx;
		width: 750rpx;
		border-bottom: 1rpx solid var(--backgroundDivisionColor);
	}

	.fixed-space {
		height: 166rpx;
	}

	.fixed-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 24rpx 0 66rpx;
		height: 166rpx;
	}

	.btn-group-inner .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}
</style>